@extends('backend.layouts.app')

@section('styles')
<link rel="stylesheet" href="{{asset('/backend/js/ztree/css/metroStyle/metroStyle.css')}}">
@endsection

@section('content')
<div class="layui-row layui-col-space15">
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header layui-card-header-auto">{{isset($dataItem) ? $dataItem->item_name : '字典'}}分类
            </div>
            <div class="layui-card-body">
                <ul class="ztree" id="dataitemTree"></ul>
            </div>
        </div>
    </div>
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-header layui-card-header-auto" id="dataitemName">
                {{isset($dataItem) ? $dataItem->item_name : '字典'}}数据</div>
            <div class="layui-card-body">
                <div class="layui-row" style="margin-bottom:10px">
                    <div class="layui-col-md6">&nbsp;</div>
                    <div cl ass="layui-col-md6">
                        <div class="layui-btn-group" style="float:right">
                            <a class="layui-btn layui-btn-sm" href="javascript:create()">添加</a>
                        </div>
                        @if (!isset($dataItem))
                        <div class="layui-btn-group" style="float:right">
                            <a href="{{route('admin.base.dataitem.table')}}" class="layui-btn layui-btn-sm">字典分类</a>
                        </div>
                        @endif
                    </div>
                </div>
                <table id="dataTable" lay-filter="dataTable">
                    <script type="text/html" id="sort_options">
                        <div class="layui-btn-group">
                            <a class="layui-btn layui-btn-sm" lay-event="up">向上</a>
                            <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="down">向下</a>
                        </div>

                    </script>
                    <script type="text/html" id="options">
                        <div class="layui-btn-group">
                            <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
                            <a class="layui-btn layui-btn-sm" lay-event="show">查看</a>
                            <a class="layui-btn layui-btn-sm" lay-event="del">删除</a>
                        </div>

                    </script>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script type="text/javascript" src="{{asset('/backend/js/ztree/js/jquery.ztree.all.js')}}"></script>
<script type="text/javascript">
    let current_Item_id = null;
    layui.use(['layer', 'table', 'form'], function () {
        let table = layui.table;
        var dataTable = table.render({
            elem: '#dataTable',
            title: '字典数据',
            data: [],
            page: true,
            cols: [
                [{
                    field: 'item_name',
                    title: '项目名'
                }, {
                    field: 'item_value',
                    title: '项目值'

                }, {
                    title: '有效',
                    templet: function (res) {
                        return res.status == 1 ?
                            '<input type="checkbox" lay-skin="primary" title="有效" disabled checked>' :
                            '<input type="checkbox" lay-skin="primary" title="有效" disabled>';
                    }
                }, {
                    field: 'description',
                    title: '备注'
                }, {
                    title: '排序',
                    align: 'center',
                    toolbar: '#sort_options',
                }, {
                    fixed: 'right',
                    align: 'center',
                    toolbar: '#options'
                }]
            ],
            done: function () {
                layer.closeAll('loading');
            }
        });

        $.ajax({
            data: {
                is_show: true,
                id: "{{isset($dataItem) ? $dataItem->item_id : null}}",
                hasParent: "{{isset($hasParent) ? $hasParent: false}}"
            },
            url: "{{route('admin.base.dataitem.tree')}}",
            success: function (data) {
                $.fn.zTree.init($("#dataitemTree"), {
                    view: {
                        showIcon: false,
                        showLine: false
                    },
                    callback: {
                        onClick: function (event, treeId, treeNode) {
                            current_Item_id = treeNode.id;
                            $("#dataitemName").html('字典数据 -- ' + treeNode.label + "(" +
                                treeNode.code + ")");
                            dataTable.reload({
                                url: '{{route("admin.base.dataitem.detail.list")}}',
                                where: {
                                    orderRise: true,
                                    orderType: 1,
                                    item_id: treeNode.id
                                },
                                page: {
                                    curr: 1
                                }
                            });
                        }
                    }
                }, data);
            }
        });
        table.on('tool(dataTable)', function (obj) {
            let data = obj.data;
            let layEvent = obj.event;
            switch (layEvent) {
                case 'show':
                    location.href = '/base/dataitem/detail/' + data.item_detail_id + '/show?url=' +
                        "{{ request()->getRequestUri()}}";
                    break;
                case 'edit':
                    location.href = '/base/dataitem/detail/' + data.item_detail_id + '/edit?url=' +
                        "{{ request()->getRequestUri()}}";
                    break;
                case 'del':
                    layer.confirm('确认删除吗？', function (index) {
                        $.post("{{ route('admin.base.dataitem.detail.destroy') }}", {
                            '_method': 'delete',
                            '_token': '{{csrf_token()}}',
                            ids: data.item_detail_id
                        }, function (result) {
                            if (result.code == 0) {
                                obj.del(); //删除对应行（tr）的DOM结构
                            }
                            layer.close(index);
                            layer.msg(result.msg);
                        });
                    });
                    break;
                case 'down':
                    $.post("{{ route('admin.base.dataitem.detail.increment')}}", {
                        '_method': 'put',
                        '_token': '{{csrf_token()}}',
                        id: data.item_detail_id
                    }, function (result) {
                        layer.msg(result.msg);
                    });
                    break;
                case 'up':
                    $.post("{{ route('admin.base.dataitem.detail.decrement')}}", {
                        '_method': 'put',
                        '_token': '{{csrf_token()}}',
                        id: data.item_detail_id
                    }, function (result) {
                        layer.msg(result.msg);
                    });
                    break;
                default:
                    break;
            }
        });
    });

    function create() {
        if (current_Item_id !== null) {
            location.href = '/base/dataitem/detail/create/' + current_Item_id + '?url=' +
                "{{ request()->getRequestUri()}}";
        }
    }

</script>
@endsection
